<script setup>
const props = defineProps({
  type:{
    type:String,
    default:'primary'
  }
})

const emits = defineEmits(['click'])
</script>

<template>
  <span :class="['button-circle',`type-${props.type}`]" @click="emits('click')">
    <slot></slot>
  </span>
</template>

<style scoped lang="scss">
@use "sass:map";
@use "sass:list";
.button-circle {
  $color-types:(
    "info": #9f9f9f,
    "warn": #e6a23c,
    "error": #f56c6c,
    "danger": #f56c6c,
    "primary": #2badfe,
    "success": #37d47d,
    "aqua": #00d0db,
    "orange-400": #ff7529,
    "purple": #a179fe,
  );

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #1B96FF;
  min-width: 140rpx;
  min-height: 60rpx;
  border-radius: 40rpx;
  border: 1px solid #1B96FF;
  background: #F7FBFF;
  margin: 12rpx 8rpx;

  &.type {
    @each $name,$item in $color-types {
      $ele: map.get($color-types, $name);
      &-#{$name}{
        color:$ele !important;
        border: 1px solid $ele !important;
      }
    }
  }
}
</style>
